<template>
  <div class="message-container" id="touchBox">
    <div class="tab">
      <span
        class="tab-item"
        :class="{ 'tab-active': tabIndex === 0, 'line-active': tabIndex === 0 }"
        @click="changeTab(0)"
        >活动公告</span
      >
      <span
        class="tab-item"
        :class="{ 'tab-active': tabIndex === 1 }"
        @click="changeTab(1)"
        >订单消息
        <img v-if="!isRead" src="../assets/dot.png" width="8px" height="8px" />
      </span>
      <div class="tab-line" :class="{ 'line-active': tabIndex }"></div>
    </div>
    <div class="oper">
      <div class="oper-item">
        <img src="../assets/13.png" width="16px" height="16px" />
        <span @click="deleteRead()">删除已读</span>
      </div>
      <div class="oper-item">
        <img src="../assets/14.png" width="16px" height="16px" />
        <span @click="readAll(tabIndex)">一键已读</span>
      </div>
    </div>
    <div v-if="!tabIndex">
      <div class="event">
        <div
          v-for="(item, index) in eventList"
          class="event-item"
          @click="readHandle(tabIndex, index)"
        >
          <div class="left">
            <img src="../assets/15.png" width="20px" height="24px" />
            <div class="left-text">
              <div class="title">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
            </div>
            <img
              v-if="item.status"
              src="../assets/dot.png"
              class="dot"
              width="8px"
              height="8px"
            />
          </div>
          <div class="right">{{ item.time }}</div>
        </div>
      </div>
      <div v-if="eventList.length" class="nomore">
        <span>没有更多了</span>
      </div>
      <div v-else class="no-message">
        <img src="../assets/17.png" width="200px" height="200px" />
        <div class="text">暂无消息</div>
      </div>
    </div>
    <div v-else>
      <div class="event">
        <div
          v-for="(item, index) in orderList"
          :key="item.val"
          @click="readHandle(tabIndex, index)"
          class="event-item"
        >
          <div class="left">
            <img src="../assets/16.png" width="20px" height="24px" />
            <div class="left-text">
              <div class="title">订单已取消</div>
              <div class="content">订单已成功取消，感谢您的关注</div>
            </div>
            <img
              v-if="item.status"
              src="../assets/dot.png"
              class="dot"
              width="8px"
              height="8px"
            />
          </div>
          <div class="right">2020-03-23 14:30</div>
        </div>
      </div>
      <div v-if="orderList.length" class="nomore">
        <span>没有更多了</span>
      </div>
      <div v-else class="no-message">
        <img src="../assets/17.png" width="200px" height="200px" />
        <div class="text">暂无消息</div>
      </div>
    </div>
  </div>
  <div v-if="showMask" class="mask"></div>
  <div v-if="showModal" class="modal">
    <div class="text">是否确认要删除已读通知</div>
    <div class="oper">
      <div class="confirm" @click="confirmDelete(tabIndex)">确认删除</div>
      <div class="cancle" @click="cancleDelete">取消</div>
    </div>
  </div>
  <div class="msg-box" :class="{'msg-box-active' : showDetail}">
    <div class="msg-content">
      <div class="title">活动通知</div>
      <div class="main">
        古希腊掌管废话的神古希腊掌管废话的神古希腊掌管废话的神古希腊掌管废话的神古希腊掌管废话的神古希腊掌管废话的神古希腊掌管废话的神
      </div>
      <div class="con-img"><img src="../assets/18.png" width="100%" /></div>
      <div class="s-title">小标题</div>
      <div class="s-main">此外，我还是古希腊掌管废话的神</div>
    </div>
    <div class="botton-box">
      <div class="cancle" @click="handleClose">取消</div>
      <div class="confirm" @click="handleClose">确定</div>
    </div>
  </div>
  <div class="getTip">
    <div class="tip-content" ref="tipRef">
      <div class="left">
        <img src="../assets/12.png" width="36" height="36" />
        <div class="text">
          <div class="top">恭喜获得20个租币</div>
          <div class="buttom">阅读消息</div>
        </div>
      </div>
      <div class="right"><span>+20</span></div>
    </div>
  </div>
  <div class="loading" :class="{ 'loading-fade': isLoading }">加载中</div>
</template>

<script setup lang="ts">
interface eventItem {
  title: string;
  content: string;
  time: string;
  status: boolean;
}
interface orderItem {
  val: number;
  status: boolean;
}
import { ref, onMounted } from "vue";
const tabIndex = ref(0);
const showMask = ref<boolean>(false);
const showModal = ref<boolean>(false);
const showDetail = ref<boolean>(false);
const eventList = ref<eventItem[]>([]);
const orderList = ref<orderItem[]>([]);
const tipRef = ref<HTMLDivElement | null>(null);
const isLoading = ref<boolean>(false);
for (let i = 0; i < 5; i++) {
  eventList.value.push({
    title: `活动标题${i + 1}`,
    content: "恭喜获得20个租币，请查收",
    time: "2020-03-23 14:30",
    status: true,
  });
}
for (let i = 0; i < 2; i++) {
  orderList.value.push({ val: i, status: true });
}
const isRead = ref<boolean>(false);
const changeTab = (index: number) => {
  tabIndex.value = index;
  isRead.value = true;
};
const readHandle = (tabIndex: number, index: number) => {
  showMask.value = true;
  showDetail.value = true;
  if (tabIndex) {
    orderList.value[index].status = false;
  } else {
    eventList.value[index].status = false;
  }
};
const deleteRead = () => {
  showMask.value = true;
  showModal.value = true;
};
const confirmDelete = (tabIndex: number) => {
  showMask.value = false;
  showModal.value = false;
  if (tabIndex) {
    orderList.value = orderList.value.filter((item) => item.status);
  } else {
    eventList.value = eventList.value.filter((item) => item.status);
  }
};
const cancleDelete = () => {
  showMask.value = false;
  showModal.value = false;
};
const readAll = (tabIndex: number) => {
  if (
    tabIndex === 0 &&
    eventList.value.length &&
    eventList.value.some((item) => item.status)
  ) {
    getRent();
    eventList.value.map((item) => (item.status = false));
  }
  if (
    tabIndex === 1 &&
    orderList.value.length &&
    orderList.value.some((item) => item.status)
  ) {
    getRent();
    orderList.value.map((item) => (item.status = false));
  }
};
const handleClose = () => {
  showMask.value = false;
  showDetail.value = false;
};

const getRent = () => {
  tipRef.value?.classList.add("active");
  setTimeout(() => {
    tipRef.value?.classList.remove("active");
  }, 2000);
};

onMounted(() => {
  let startY: number | null = null,
    deltaY: number | null = null;

  document.getElementById("touchBox")!.addEventListener(
    "touchstart",
    function (e) {
      startY = e.touches[0].clientY;
      e.stopPropagation();
    },
    { passive: true, capture: false }
  );
  document.getElementById("touchBox")!.addEventListener(
    "touchmove",
    function (e) {
      if (!startY) return;
      deltaY = e.touches[0].clientY - startY;
      e.stopPropagation();
    },
    { passive: true, capture: false }
  );
  document.getElementById("touchBox")!.addEventListener(
    "touchend",
    function (e) {
      if (deltaY! <= -100) {
        isLoading.value = true;
        eventList.value.push({
          title: `这是一个新标题${1}`,
          content: "恭喜获得20个租币，请查收",
          time: "2024-06-26 09:00",
          status: true,
        });
      }
      startY = null;
      deltaY = null;
      setTimeout(() => {
        isLoading.value = false;
      }, 300);
      e.stopPropagation();
    },
    { passive: true, capture: false }
  );
});
</script>

<style lang="scss" scoped>
@mixin flexBox($jc-value: center, $ac-value: center) {
  display: flex;
  justify-content: $jc-value;
  align-items: $ac-value;
}

$smallTextColor: #999999;

.message-container {
  height: calc(100% - 50px);
  overflow-y: auto;
  .tab {
    position: relative;

    .tab-item {
      margin: 0 15px;
      color: #666;
      position: relative;

      img {
        position: absolute;
        top: 0px;
        right: -10px;
      }
    }

    .tab-active {
      font-size: 18px;
      font-weight: 700;
      color: #000;
    }

    .tab-line {
      width: 20px;
      height: 5px;
      margin: 10px 0px;
      border-radius: 20px;
      background-color: #00c8be;
      position: absolute;
      left: 40px;
      transform: translateX(0px);
      transition: transform 0.5s ease;
    }

    .line-active {
      transform: translateX(100px);
    }
  }

  .oper {
    height: 50px;
    margin-top: 25px;
    background-color: #f7f8f9;
    @include flexBox(flex-start);

    .oper-item {
      @include flexBox(flex-start);
      padding: 0px 15px;
      font-size: 14px;
      color: $smallTextColor;

      span {
        letter-spacing: 2px;
        padding-left: 5px;
      }

      &:nth-child(1) {
        border-right: 1px $smallTextColor solid;
      }
    }
  }

  .event {
    @include flexBox();
    flex-direction: column;

    .event-item {
      width: 100%;
      height: 100px;
      padding: 25px 15px 0px 15px;
      box-sizing: border-box;
      @include flexBox(space-between, flex-start);
      border-bottom: 1px #f2f2f2 solid;
      background-color: #fff;

      .left {
        @include flexBox(center, flex-start);
        position: relative;

        .dot {
          position: absolute;
          top: -4px;
          left: 18px;
        }

        .left-text {
          margin-left: 15px;

          .title {
            font-size: 20px;
            font-weight: 400;
          }

          .content {
            margin: 10px 0px;
            font-size: 12px;
            color: $smallTextColor;
            letter-spacing: 1px;
          }
        }
      }

      .right {
        color: $smallTextColor;
      }
    }
  }

  .nomore {
    @include flexBox();
    height: 50px;

    span {
      color: $smallTextColor;
    }
  }

  .no-message {
    @include flexBox();
    margin-top: 80px;
    flex-direction: column;

    .text {
      font-size: 20px;
      color: $smallTextColor;
    }
  }
}

.modal {
  width: calc(100% - 100px);
  height: 150px;
  margin: 0px 50px;
  border-radius: 15px;
  background-color: #fff;
  position: fixed;
  top: 30%;
  z-index: 20;

  .text {
    height: 100px;
    border-bottom: 1px #ddd solid;
    @include flexBox();
    font-size: 18px;
    font-weight: 400;
  }

  .oper {
    height: 50px;
    @include flexBox(space-around);
    letter-spacing: 2px;

    .confirm {
      width: 50%;
      height: 100%;
      border-right: 1px #ddd solid;
      font-size: 18px;
      color: $smallTextColor;
      @include flexBox();
    }

    .cancle {
      width: 50%;
      height: 100%;
      font-size: 18px;
      color: #00c8be;
      @include flexBox();
    }
  }
}

.mask {
  width: 100%;
  height: calc(100% - 50px);
  position: fixed;
  top: 50px;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 10;
}

.getTip {
  @include flexBox();

  .tip-content {
    width: calc(100% - 40px);
    height: 65px;
    padding: 0px 20px;
    position: fixed;
    bottom: 45px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s linear;
    background-color: rgba(0, 0, 0, 0.72);

    @include flexBox(space-between);

    .left {
      @include flexBox(space-between);

      .text {
        padding-left: 10px;
      }
    }
  }

  .active {
    opacity: 1;
  }
}

.msg-box {
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: -1000px;
  box-sizing: border-box;
  transition: bottom .5s ease;
  background-color: #fff;
  z-index: 20;

  .msg-content {
    width: 100%;
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;

    .title {
      margin: 10px 0px;
      font-size: 18px;
    }

    .main {
      margin: 5px 0px;
      padding: 5px 0px;
      color: $smallTextColor;
    }

    .s-title {
      margin: 5px 0px;
    }

    .s-main {
      margin: 5px 0px;
    }
  }

  .botton-box {
    margin-top: 20px;
    @include flexBox(space-between);

    .cancle {
      width: 30%;
      height: 50px;
      background-color: #f2f2f2;
      color: #bfbfbf;
      @include flexBox();
    }

    .confirm {
      width: 70%;
      height: 50px;
      background-color: #00c8be;
      color: #fff;
      @include flexBox();
    }
  }
}
.msg-box-active {
  bottom: 0px;
}

.loading {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  opacity: 0;
  font-size: 20px;
  border-radius: 5px;
  color: #fff;
  @include flexBox();
  background-color: #000;
  transform: translate(-50%, -50%);
  transition: opacity z-index 0.5s ease;
  z-index: -10;
}
.loading-fade {
  z-index: 10;
  opacity: 0.7;
}
</style>
